<template>
  <div class="app">


    <!-- 主要内容区域 -->
    <main class="main-content">
      <router-view />
    </main>

    <!-- 底部导航栏 -->
    <nav class="nav-bar">
      <div class="nav-bar__item" @click="handleClickHome">
        <div class="iconfont">&#xe627;</div>
        <div class="nav-bar__title">首页</div>
      </div>
      <div class="nav-bar__item" @click="handleClickCategory">
        <div class="iconfont">&#xe60c;</div>
        <div class="nav-bar__title">分类</div>
      </div>
      <div class="nav-bar__item" @click="handleClickCart">
        <div class="iconfont">
          &#xe60c;
          <div class="nav-bar__badge" v-show="cartCount > 0">{{ cartCount }}</div>
        </div>
        <div class="nav-bar__title">购物车</div>
      </div>
      <div class="nav-bar__item" @click="handleClickMine">
        <div class="iconfont">&#xe60c;</div>
        <div class="nav-bar__title">我的</div>
      </div>
    </nav>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { computed } from 'vue'

const useNavEffect = () => {
  const router = useRouter()
  const store = useStore()

  const handleClickHome = () => {
    router.push('/')
  }

  const handleClickCategory = () => {
    router.push('/category')
  }

  const handleClickCart = () => {
    router.push('/cartList')
  }

  const handleClickMine = () => {
    router.push('/mine')
  }

  const cartCount = computed(() => {
    let count = 0
    const cartList = store.state.cartList
    for (let shopId in cartList) {
      const productList = cartList[shopId].productList
      for (let productId in productList) {
        const product = productList[productId]
        count += product.count
      }
    }
    return count
  })

  return {
    handleClickHome,
    handleClickCategory,
    handleClickCart,
    handleClickMine,
    cartCount
  }
}

export default {
  name: 'App',
  setup() {
    const {
      handleClickHome,
      handleClickCategory,
      handleClickCart,
      handleClickMine,
      cartCount
    } = useNavEffect()

    return {
      handleClickHome,
      handleClickCategory,
      handleClickCart,
      handleClickMine,
      cartCount
    }
  }
}
</script>

<style lang="scss">
@import './style/variables.scss';
@import './style/mixins.scss';

html {
  font-size: 100px;
}

body {
  font-size: .12rem;
  margin: 0;
  background-color: $bgColor;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: .44rem;
  background: $bgColor;
  display: flex;
  align-items: center;
  padding: 0 .15rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  z-index: 100;

  &__left,
  &__right {
    width: .44rem;
    height: .44rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconfont {
      font-size: .2rem;
      color: $content-fontcolor;
    }
  }

  &__center {
    flex: 1;
    padding: 0 .15rem;
  }

  .search-bar {
    height: .32rem;
    background: $search-bgColor;
    border-radius: .16rem;
    display: flex;
    align-items: center;
    padding: 0 .15rem;

    .iconfont {
      font-size: .16rem;
      color: $content-fontcolor;
      margin-right: .1rem;
    }

    input {
      flex: 1;
      border: none;
      background: transparent;
      font-size: .14rem;
      color: $content-fontcolor;
      outline: none;

      &::placeholder {
        color: $content-fontcolor;
      }
    }
  }
}

.main-content {
  flex: 1;
  margin-top: .44rem;
  margin-bottom: .5rem;
  overflow-y: auto;
}

.nav-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: .5rem;
  background: $bgColor;
  display: flex;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
  z-index: 100;

  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $content-fontcolor;
    text-decoration: none;
    position: relative;

    .iconfont {
      font-size: .2rem;
      margin-bottom: .02rem;
    }

    &--active {
      color: $hightlight-fontColor;
    }
  }

  &__title {
    font-size: .12rem;
    transform: scale(.8);
    transform-origin: center top;
  }

  &__badge {
    position: absolute;
    right: .1rem;
    top: .02rem;
    min-width: .16rem;
    height: .16rem;
    line-height: .16rem;
    background-color: $hightlight-fontColor;
    border-radius: .08rem;
    font-size: .12rem;
    text-align: center;
    color: $bgColor;
    transform: scale(.8);
    transform-origin: center center;
  }
}
</style>